<template>
    <div class="chaperone settle-sub-box">
        <el-container>
            <el-header :height="'auto'">
                <div class="tips">注：陪护期间，请主动坚持每日健康打卡</div>
            </el-header>
            <div class="el-main">
                <div class="msg-card">
                    <div class="head">
                        <div class="right">
                            <!--                            <span @click="changePatient" class="mr20">切换陪护</span>-->
                            <span @click="$router.push('/patient-bind')">新增陪护</span>
                        </div>
                        <div class="title">陪护患者</div>
                    </div>
                    <div class="list" v-for="(item,index) in patientList" :key="index">
                        <div class="head">
                            <div class="state" :class="'state'+item.status">{{status[item.status]}}</div>
                            <div class="name ml10">{{item.name}}</div>
                            <div class="remove">
                                <span class="link remove" @click="remove(item)" v-if="item.status==0">解除陪护</span>
                                <span class="link" @click="patientChange(item)"
                                      v-if="item.status==1 && patientCanChange">陪护他</span>
                            </div>
                        </div>
                        <div class="info clearfix">
                            <div class="bed"><span>床位号</span> {{item.bedNumber}}</div>
                            <div><span>住院号</span> {{item.admissionNumber}}</div>
                        </div>
                    </div>
                    <infinite-loading @infinite="infiniteHandler" :identifier="infiniteId" spinner="spiral"
                                      :distance="100">
                        <div slot="no-more"></div>
                        <div slot="no-results"></div>
                        <div slot="error" slot-scope="{ trigger }">
                        </div>
                    </infinite-loading>
                    <div class="empty" v-if="!patientList[0]">暂无关联的患者</div>
                </div>
            </div>
        </el-container>
        <!--        <div v-transfer-dom>-->
        <!--            <popup v-model="showPatientChange" :hide-on-blur="false" :height="'50%'">-->
        <!--                <popup-header-->
        <!--                    :left-text="'取消'"-->
        <!--                    :right-text="'确定'"-->
        <!--                    @on-click-left="popupCancel"-->
        <!--                    @on-click-right="popupSure"></popup-header>-->
        <!--                <div class="date-time">-->
        <!--                    <div class="patients">-->
        <!--                        <div v-for="(item,index) in patients" :key="index" :class="{active: item.checked}"-->
        <!--                             @click="patientChange(item)">-->
        <!--                            <div class="label">{{item.value}}</div>-->
        <!--                            <i class="el-icon-check check"></i>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div>-->
        <!--            </popup>-->
        <!--        </div>-->
    </div>
</template>

<script>
    import {PopupHeader, Popup, TransferDom} from 'vux'

    export default {
        data() {
            return {
                patientList: [],
                index: 1,
                status: ['陪护中', '待陪护', '患者出院', '已解除'],
                showPatientChange: false,
                patients: [], // 可切换患者列表
                infiniteId: +new Date()
            }
        },
        computed: {
            patientCanChange: function () {
                let show = false
                if (this.patientList[0]) {
                    this.patientList.map(e => {
                        if (e.status === 0) show = true
                    })
                }
                return !show
            }
        },
        mounted() {
            this.$emit('footerHide')
        },
        methods: {
            infiniteHandler($state) {
                this.$http.get('/escort/selectEscortAssociatedPatient', {
                    size: 10,
                    current: this.index || 1
                }).then(result => {
                    if (result.success) {
                        this.patientList.push(...result.data.records)
                        if (result.data.pages <= result.data.current) {
                            $state.loaded()
                            $state.complete()
                        } else {
                            this.index += 1
                            $state.loaded()
                        }
                    } else {
                        $state.loaded()
                        $state.complete()
                    }
                }).catch(() => {
                    $state.error()
                })
            },
            changePatient() {
                // this.$http.get('/escort/selectPatientChangeStatus').then(result => {
                //     if (result.success) {
                //         if (result.data.length > 0) {
                //             this.showPatientChange = true
                //         } else {
                //             this.$method.showToast('暂无可切换陪护的患者')
                //         }
                //     }
                // })
            },
            remove(item) {
                let _this = this
                this.$vux.confirm.show({
                    content: '确定解除陪护吗？',
                    onConfirm() {
                        _this.$http.get('/escort/cancelPatient', {
                            id: item.id
                        }).then(result => {
                            if (result.success) {
                                _this.changeLoading()
                            }
                        })
                    }
                })
            },
            changeLoading() {
                this.index = 1
                this.patientList = []
                this.infiniteId += 1
            },
            patientChange(item) {
                let _this = this
                this.$vux.confirm.show({
                    content: '确定陪护' + item.name + '吗？',
                    onConfirm() {
                        _this.$http.get('/escort/cutoverPatient', {
                            id: item.id
                        }).then(result => {
                            if (result.success) {
                                if (result.message) _this.$method.showToast(result.message)
                                _this.changeLoading()
                            }
                        })
                    }
                })
            },
            popupCancel() {
                this.showPatientChange = false
                this.$nextTick(() => {
                    this.patients = []
                })
            },
            popupSure() {
                let current = this.patients.filter(e => {
                    if (e.checked) return e
                })
                if (current && current[0]) {
                    this.$http.get('/escort/cutoverPatient', {
                        id: current[0].id
                    }).then(result => {
                        if (result.success) {
                            this.changeLoading()
                            this.popupCancel()
                        }
                    })
                } else {
                    this.popupCancel()
                }
            }
        },
        components: {
            PopupHeader,
            Popup
        },
        directives: {
            TransferDom
        }
    }
</script>

<style scoped lang="less">
    .el-container {
        height: 100%;

        .el-header, .el-main {
            padding: 0;
        }
    }

    .chaperone {
        background-color: #fff;

        .tips {
            color: #ae9393;
            padding: .15rem .3rem;
            background-color: #F2F2F2;
        }
    }

    .msg-card {
        background-color: #fff;
        padding: .3rem;

        .head {
            line-height: .48rem;
            margin-bottom: .2rem;

            .title {
                font-size: .32rem;
                font-weight: bolder;
            }

            .right {
                float: right;
                color: #598CDA;
            }
        }

        .list {
            padding: .2rem;
            box-shadow: 0 0 5px -1px rgba(0, 0, 0, .1);
            border-radius: 3px;
            margin-bottom: .2rem;

            .head {
                display: flex;
                align-items: center;
                line-height: 1;
                margin-bottom: .2rem;

                .name {
                    flex: 1;
                    font-weight: bolder;
                }

                .state {
                    padding: .06rem .1rem;
                    background-color: #598CDA;
                    color: #fff;
                    border-radius: 3px;
                    font-size: .2rem;
                    text-align: center;

                    &.state1 {
                        color: #fff;
                        background-color: #DA6959;
                    }

                    &.state2, &.state3 {
                        color: #fff;
                        background-color: #999;
                    }
                }

                .remove {
                    .link {
                        color: #598CDA;

                        &.remove {
                            color: #DA6959;
                        }
                    }
                }
            }

            .info {
                color: #a4a4a4;
                font-weight: bolder;

                .bed {
                    float: right;
                }

                span {
                    font-weight: normal;
                    color: #999;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }

            &.active {
                background-color: #598CDA;
                color: #fff;

                .head {
                    .state {
                        background-color: #fff;
                        color: #598CDA;

                        &.state1 {
                            color: #DA6959;
                        }
                    }
                }

                .info {
                    color: #fff;

                    span {
                        color: #fff;
                    }
                }
            }
        }

        .empty {
            text-align: center;
            line-height: 1rem;
            color: #999;
        }
    }

    .date-time, .floor-tree {
        height: calc(100% - .8rem);
        display: flex;

        .patients {
            flex: 1;
            overflow-y: auto;
            background-color: #fff;

            > div {
                padding: .15rem .2rem;
                border-bottom: 1px solid #eee;
                display: flex;
                align-items: center;

                .check {
                    display: none;
                    color: #598CDA;
                }

                .label {
                    flex: 1;
                }

                &.active {
                    .check {
                        display: block;
                    }
                }

                &.disabled {
                    background-color: #f5f5f5;
                    color: #999;
                }
            }
        }
    }
</style>
